<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Bootstrap 4的新版式</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body>
<div class="clearfix my-4">
    <div class="d-flex float-left float-md-left">
        <div class="dropdown btn-group">
            <button class="btn btn-outline-success" type="button">选择条件</button>
            <button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-offset="-90,0" type="button"></button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">角色名称</a>
                <a href="#" class="dropdown-item">角色描述</a>
            </div>
        </div>
        <div class="ml-3">
            <form class="form-inline">
                <div class="form-group">
                    <input type="search" class="form-control">
                </div>
                <button type="submit" class="btn btn-success">查询</button>
            </form>
        </div>
    </div>
    <div class="ml-auto btn-group float-md-right">
        <button type="button" class="btn btn-primary"><i class="fa fa-plus mr-1">新增</i></button>
        <button type="button" class="btn btn-warning"><i class="fa fa-times mr-1">删除</i></button>
        <button type="button" class="btn btn-info"><i class="fa fa-pencil mr-1">编辑</i></button>
        <button type="button" class="btn btn-success"><i class="fa fa-star mr-1">角色授权</i></button>

    </div>

</div>
<table class="table table-bordered">
    <thead class="table-success">
    <tr>
        <th><input type="checkbox"></th><th>角色编号</th><th>角色名称</th><th>创建时间</th><th>角色描述</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td><td>10001</td><td>系统管理员</td><td>2020-10-20</td><td>周鑫</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td><td>10002</td><td>超级会员</td><td>2020-10-20</td><td>刘禹锡</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td><td>10003</td><td>超级会员</td><td>2020-10-20</td><td>方兴旺</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td><td>10004</td><td>普通会员</td><td>2020-10-20</td><td>林欢欢</td>
    </tr>
    </tbody>
</table>


<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>